<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				label-width="auto"
			>
				<el-form-item :label="$t('common.choose_merchant') + ':'">
					<merchant-select
						v-model="queryData.merchantId"
					></merchant-select>
				</el-form-item>
				<el-form-item label="模板类型:">
					<el-select
						v-model="queryData.templateType"
						clearable
						collapse-tags
						placeholder="默认选择全部"
						style="width: 160px"
						:popper-append-to-body="false"
					>
						<el-option label="返点模板" value="1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="$t('common.createBy') + ':'">
					<el-input
						v-input="{ name: 'symbols' }"
						v-model="queryData.createdBy"
						clearable
						maxlength="10"
						size="medium"
						style="width: 180px; margin-right: 20px"
						:placeholder="$t('common.please_enter')"
						:disabled="loading"
					></el-input>
				</el-form-item>
				<el-form-item label="最后修改人:">
					<el-input
						v-input="{ name: 'symbols' }"
						v-model="queryData.updatedBy"
						maxlength="20"
						clearable
						size="medium"
						style="width: 180px"
						:placeholder="$t('common.please_enter')"
						:disabled="loading"
					></el-input>
				</el-form-item>
				<el-form-item label="创建时间:">
					<el-date-picker
						v-model="queryData.createdAt"
						size="medium"
						:picker-options="pickerShortcut2"
						format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						:start-placeholder="$t('common.start_date')"
						:end-placeholder="$t('common.end_date')"
						align="right"
						:clearable="true"
						value-format="timestamp"
						:default-time="defaultTime"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="最后修改时间:">
					<el-date-picker
						v-model="queryData.updatedAt"
						size="medium"
						:picker-options="pickerShortcut2"
						format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						:start-placeholder="$t('common.start_date')"
						:end-placeholder="$t('common.end_date')"
						align="right"
						:clearable="true"
						value-format="timestamp"
						:default-time="defaultTime"
					></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('90360053')"
						type="warning"
						icon="el-icon-folder"
						:disabled="loading"
						size="medium"
						@click="addLabel"
					>
						创建模板
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="tableData"
				style="width: 100%"
				:max-height="tableHeight"
				:header-cell-style="getRowClass"
			>
				<el-table-column
					prop="merchantId"
					align="center"
					:label="$t('common.belong_merchant')"
					width="230"
				>
					<template slot-scope="scope">
						<span>
							{{ merchantFilter(scope.row.merchantId) }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="templateType"
					align="center"
					label="模板类型"
				>
					返点模板
				</el-table-column>
				<el-table-column
					prop="templateName"
					align="center"
					label="模板名称"
				>
					<template slot-scope="scope">
						{{ scope.row.templateName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="description"
					align="center"
					label="模板描述"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.description || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="useCount"
					align="center"
					label="关联总代条线"
				>
					<template slot-scope="scope">
						{{ scope.row.useCount || 0 }}
					</template>
				</el-table-column>
				<el-table-column
					prop="createdBy"
					align="center"
					:label="$t('common.createBy')"
				>
					<template slot-scope="scope">
						{{ scope.row.createdBy || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="createdAt"
					align="center"
					:label="$t('common.createAt')"
					width="180"
				>
					<template slot-scope="scope">
						{{ scope.row.createdAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="updatedBy"
					align="center"
					label="最后修改人"
					width="120"
				>
					<template slot-scope="scope">
						{{ scope.row.updatedBy || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="updatedAt"
					align="center"
					label="最后修改时间"
					width="180"
				>
					<template slot-scope="scope">
						{{ scope.row.updatedAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="operating"
					align="center"
					fixed="right"
					:label="$t('common.actions')"
					width="350"
				>
					<template slot-scope="scope">
						<el-button
							v-if="!scope.row.useCount"
							type="primary"
							icon="el-icon-edit"
							size="medium"
							@click="setRebateRate(scope.row)"
						>
							设置比例
						</el-button>
						<el-button
							v-if="scope.row.useCount"
							type="primary"
							icon="el-icon-view"
							size="medium"
							@click="lookRebateRate(scope.row)"
						>
							查看比例
						</el-button>
						<el-button
							v-if="hasPermission('90360054')"
							type="primary"
							icon="el-icon-edit"
							size="medium"
							@click="edit(scope.row)"
						>
							编辑
						</el-button>
						<el-button
							v-if="scope.row.useCount"
							type="primary"
							icon="el-icon-view"
							size="medium"
							@click="lookProxyList(scope.row)"
						>
							查看关联总代
						</el-button>
						<el-button
							v-if="!scope.row.useCount"
							type="danger"
							icon="el-icon-delete"
							size="medium"
							@click="deleteLabel(scope.row)"
						>
							{{ $t('common.delete') }}
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<el-dialog
			:title="title"
			:visible.sync="dialogFormVisible"
			:destroy-on-close="true"
			width="580px"
			class="rempadding"
			@close="clear"
		>
			<el-divider></el-divider>
			<el-form
				ref="formSub"
				:model="dialogForm"
				:rules="rules"
				label-width="auto"
			>
				<el-form-item
					:label="$t('common.choose_merchant') + ':'"
					prop="merchantId"
				>
					<merchant-select
						v-model="dialogForm.merchantId"
						:placeholder="$t('common.please_choose')"
						:disabled="title !== '新增模板'"
						style="width: 457px"
					></merchant-select>
				</el-form-item>
				<el-form-item
					label="模板类型:"
					prop="templateType"
					:rules="[
						{
							required: true,
							message: '请选择模板类型',
							trigger: 'blur'
						}
					]"
				>
					<el-select
						v-model="dialogForm.templateType"
						clearable
						collapse-tags
						style="width: 457px"
						:popper-append-to-body="false"
					>
						<el-option label="返点模板" value="1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					label="模板名称"
					prop="templateName"
					:rules="[
						{
							required: true,
							message: '请输入模板名称',
							trigger: 'blur'
						}
					]"
				>
					<el-input
						v-input="{ name: 'symbols' }"
						v-model="dialogForm.templateName"
						:placeholder="$t('common.please_enter')"
						maxlength="50"
						autocomplete="off"
					></el-input>
				</el-form-item>
				<el-form-item
					label="模板描述"
					prop="description"
					:rules="[
						{
							required: true,
							message: '请输入模板描述',
							trigger: 'blur'
						},
						{
							max: 500,
							message: '长度最多500个字符',
							trigger: 'blur'
						}
					]"
				>
					<el-input
						v-model="dialogForm.description"
						:placeholder="$t('common.please_enter')"
						maxlength="500"
						type="textarea"
						show-word-limit
					></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="subAddOrEdit">
					{{ $t('common.save') }}
				</el-button>
			</div>
		</el-dialog>
		<el-dialog
			:title="title1"
			:visible.sync="dialogLookRebateVisible"
			:destroy-on-close="true"
			class="rempadding"
			width="1200px"
		>
			<el-divider></el-divider>
			<div class="contentBox">
				团队返点比例:
				<el-button v-if="isSet" type="warning" @click="addRate">
					新增
				</el-button>
			</div>
			<el-form
				ref="tableForm"
				class="set-rebate-table"
				:model="{ rebateRateList }"
			>
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					class="small-size-table"
					:data="rebateRateList"
					style="width: 100%; margin: 15px 0"
					:header-cell-style="getRowClass"
				>
					<el-table-column
						prop="level"
						align="center"
						label="比例等级"
					>
						<template slot-scope="scope">
							{{ scope.row.level }}
						</template>
					</el-table-column>
					<el-table-column prop="texasRebate" align="center">
						<template slot="header">
							德州-俱乐部
							<br />
							团队返点
						</template>
						<template slot-scope="scope">
							<el-form-item
								v-if="isSet"
								:prop="
									`rebateRateList.${scope.$index}.texasRebate`
								"
								:rules="[
									{
										required: true,
										validator: getVaLiDate(
											scope.row,
											'texasRebate',
											scope.$index
										),
										trigger: ['blur']
									}
								]"
							>
								<el-input-number
									size="mini"
									:precision="3"
									:controls="false"
									:min="0"
									:disabled="
										scope.$index > 0 &&
											!rebateRateList[scope.$index - 1]
												.texasRebate
									"
									v-model.trim="scope.row.texasRebate"
									style="width: 70%"
								/>
								%
							</el-form-item>
							<span v-else>{{ scope.row.texasRebate }}%</span>
						</template>
					</el-table-column>
					<el-table-column prop="texasInsuranceRebate" align="center">
						<template slot="header">
							德州-保险
							<br />
							团队分成
						</template>
						<template slot-scope="scope">
							<el-form-item
								v-if="isSet"
								:prop="
									`rebateRateList.${
										scope.$index
									}.texasInsuranceRebate`
								"
								:rules="[
									{
										required: true,
										validator: getVaLiDate(
											scope.row,
											'texasInsuranceRebate',
											scope.$index
										),
										trigger: ['blur']
									}
								]"
							>
								<el-input-number
									size="mini"
									:precision="3"
									:controls="false"
									:min="0"
									:disabled="
										scope.$index > 0 &&
											!rebateRateList[scope.$index - 1]
												.texasInsuranceRebate
									"
									v-model.trim="
										scope.row.texasInsuranceRebate
									"
									style="width: 70%"
								/>
								%
							</el-form-item>
							<span v-else>
								{{ scope.row.texasInsuranceRebate }}%
							</span>
						</template>
					</el-table-column>
					<el-table-column prop="actualPersonRebate" align="center">
						<template slot="header">
							真人
							<br />
							团队返点
						</template>
						<template slot-scope="scope">
							<el-form-item
								v-if="isSet"
								:prop="
									`rebateRateList.${
										scope.$index
									}.actualPersonRebate`
								"
								:rules="[
									{
										required: true,
										validator: getVaLiDate(
											scope.row,
											'actualPersonRebate',
											scope.$index
										),
										trigger: ['blur']
									}
								]"
							>
								<el-input-number
									size="mini"
									:precision="3"
									:controls="false"
									:min="0"
									:disabled="
										scope.$index > 0 &&
											!rebateRateList[scope.$index - 1]
												.actualPersonRebate
									"
									v-model.trim="scope.row.actualPersonRebate"
									style="width: 70%"
								/>
								%
							</el-form-item>
							<span v-else>
								{{ scope.row.actualPersonRebate }}%
							</span>
						</template>
					</el-table-column>
					<el-table-column prop="sportsRebate" align="center">
						<template slot="header">
							体育
							<br />
							团队返点
						</template>
						<template slot-scope="scope">
							<el-form-item
								v-if="isSet"
								:prop="
									`rebateRateList.${
										scope.$index
									}.sportsRebate`
								"
								:rules="[
									{
										required: true,
										validator: getVaLiDate(
											scope.row,
											'sportsRebate',
											scope.$index
										),
										trigger: ['blur']
									}
								]"
							>
								<el-input-number
									size="mini"
									:precision="3"
									:controls="false"
									:min="0"
									:disabled="
										scope.$index > 0 &&
											!rebateRateList[scope.$index - 1]
												.sportsRebate
									"
									v-model.trim="scope.row.sportsRebate"
									style="width: 70%"
								/>
								%
							</el-form-item>
							<span v-else>{{ scope.row.sportsRebate }}%</span>
						</template>
					</el-table-column>
					<el-table-column prop="lotteryTicketRebate" align="center">
						<template slot="header">
							彩票
							<br />
							团队返点
						</template>
						<template slot-scope="scope">
							<el-form-item
								v-if="isSet"
								:prop="
									`rebateRateList.${
										scope.$index
									}.lotteryTicketRebate`
								"
								:rules="[
									{
										required: true,
										validator: getVaLiDate(
											scope.row,
											'lotteryTicketRebate',
											scope.$index
										),
										trigger: ['blur']
									}
								]"
							>
								<el-input-number
									size="mini"
									:precision="3"
									:controls="false"
									:min="0"
									:disabled="
										scope.$index > 0 &&
											!rebateRateList[scope.$index - 1]
												.lotteryTicketRebate
									"
									v-model.trim="scope.row.lotteryTicketRebate"
									style="width: 70%"
								/>
								%
							</el-form-item>
							<span v-else>
								{{ scope.row.lotteryTicketRebate }}%
							</span>
						</template>
					</el-table-column>
					<el-table-column prop="chessRebate" align="center">
						<template slot="header">
							棋牌
							<br />
							团队返点
						</template>
						<template slot-scope="scope">
							<el-form-item
								v-if="isSet"
								:prop="
									`rebateRateList.${scope.$index}.chessRebate`
								"
								:rules="[
									{
										required: true,
										validator: getVaLiDate(
											scope.row,
											'chessRebate',
											scope.$index
										),
										trigger: ['blur']
									}
								]"
							>
								<el-input-number
									size="mini"
									:precision="3"
									:controls="false"
									:min="0"
									:disabled="
										scope.$index > 0 &&
											!rebateRateList[scope.$index - 1]
												.chessRebate
									"
									v-model.trim="scope.row.chessRebate"
									style="width: 70%"
								/>
								%
							</el-form-item>
							<span v-else>{{ scope.row.chessRebate }}%</span>
						</template>
					</el-table-column>
					<el-table-column prop="esportsRebate" align="center">
						<template slot="header">
							电竞
							<br />
							团队返点
						</template>
						<template slot-scope="scope">
							<el-form-item
								v-if="isSet"
								:prop="
									`rebateRateList.${
										scope.$index
									}.esportsRebate`
								"
								:rules="[
									{
										required: true,
										validator: getVaLiDate(
											scope.row,
											'esportsRebate',
											scope.$index
										),
										trigger: ['blur']
									}
								]"
							>
								<el-input-number
									size="mini"
									:precision="3"
									:controls="false"
									:min="0"
									:disabled="
										scope.$index > 0 &&
											!rebateRateList[scope.$index - 1]
												.esportsRebate
									"
									v-model.trim="scope.row.esportsRebate"
									style="width: 70%"
								/>
								%
							</el-form-item>
							<span v-else>{{ scope.row.esportsRebate }}%</span>
						</template>
					</el-table-column>
					<el-table-column
						v-if="title1 == '设置比例'"
						prop="operating"
						align="center"
						:label="$t('common.actions')"
					>
						<template slot-scope="scope">
							<el-button
								v-if="rebateRateList.length > 1"
								type="danger"
								icon="el-icon-delete"
								size="medium"
								@click="delRate(scope.row)"
							>
								删除
							</el-button>
							<span v-else>/</span>
						</template>
					</el-table-column>
				</el-table>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogLookRebateVisible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="saveRebateRate">
					{{ $t('common.save') }}
				</el-button>
			</div>
		</el-dialog>
		<el-dialog
			title="查看关联总代"
			:visible.sync="dialogProxyListVisible"
			:destroy-on-close="true"
			class="rempadding"
			width="1000px"
		>
			<el-divider></el-divider>
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				size="mini"
				class="small-size-table"
				:data="proxyList"
				style="width: 100%; margin: 15px 0"
				:header-cell-style="getRowClass"
				:max-height="tableHeight"
				highlight-current-row
			>
				<el-table-column
					prop="userName"
					align="center"
					label="总代账号"
					min-width="200px"
				>
					<template slot-scope="scope">
						{{ scope.row.userName }}
					</template>
				</el-table-column>
				<el-table-column
					prop="accountType"
					align="center"
					:label="$t('common.number_type')"
				>
					<template slot-scope="scope">
						<span v-if="scope.row.accountType">
							{{
								typeFilter(scope.row.accountType, 'accountType')
							}}
						</span>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					key="underMemberNum"
					prop="underMemberNum"
					align="center"
					:label="$t('agent.sub_agent_numbers')"
					min-width="130"
				>
					<template slot="header">
						{{ $t('agent.sub_agent_numbers') }}
						<br />
						{{ $t('agent.sub_member_numbers') }}
					</template>
					<template slot-scope="scope">
						{{ scope.row.underProxyNum || '0' }}
						<br />
						{{ scope.row.underMemberNum || '0' }}
					</template>
				</el-table-column>
				<el-table-column
					key="directlyUnderProxyNum"
					prop="directlyUnderProxyNum"
					align="center"
					:label="$t('agent.direct_agent_number')"
					min-width="130"
				>
					<template slot="header">
						{{ $t('agent.direct_agent_number') }}
						<br />
						{{ $t('agent.direct_member_number') }}
					</template>
					<template slot-scope="scope">
						{{ scope.row.directlyUnderProxyNum || '0' }}
						<br />
						{{ scope.row.directlyUnderMemberNum || '0' }}
					</template>
				</el-table-column>
				<el-table-column
					key="centerWalletBalance"
					prop="centerWalletBalance"
					align="center"
					label="现金余额"
					min-width="120"
				>
					<template slot-scope="scope">
						<span
							v-if="
								!!scope.row.centerWalletBalance ||
									scope.row.centerWalletBalance === 0
							"
						>
							{{ handleCurrency(scope.row.currency) }}
							{{
								handleNumber(
									scope.row.currency,
									scope.row.centerWalletBalance
								)
							}}
						</span>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="creditWalletBalance"
					align="center"
					label="可用额度"
					min-width="120"
				>
					<template slot-scope="scope">
						<span
							v-if="
								!!scope.row.creditWalletBalance ||
									scope.row.creditWalletBalance === 0
							"
						>
							{{ handleCurrency(scope.row.currency) }}
							{{
								handleNumber(
									scope.row.currency,
									scope.row.creditWalletBalance
								)
							}}
						</span>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="creditQuota"
					align="center"
					label="信用额度"
					min-width="120"
				>
					<template slot-scope="scope">
						<span
							v-if="
								!!scope.row.creditQuota ||
									scope.row.creditQuota === 0
							"
						>
							{{ handleCurrency(scope.row.currency) }}
							{{
								handleNumber(
									scope.row.currency,
									scope.row.creditQuota
								)
							}}
						</span>
						<span v-else>-</span>
					</template>
				</el-table-column>

				<el-table-column
					prop="accountsReceivable"
					align="center"
					label="应还账款"
					min-width="120"
				>
					<template slot-scope="scope">
						<span
							v-if="
								!!scope.row.accountsReceivable ||
									scope.row.accountsReceivable === 0
							"
						>
							{{ handleCurrency(scope.row.currency) }}
							{{
								handleNumber(
									scope.row.currency,
									scope.row.accountsReceivable
								)
							}}
						</span>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					key="totalDepositAmount"
					align="center"
					min-width="150"
					:label="$t('agent.total_deposit_times')"
				>
					<template slot="header">
						{{ $t('agent.total_deposit_amount') }}
						<br />
						{{ $t('agent.total_deposit_times') }}
					</template>
					<template slot-scope="scope">
						<span
							v-if="
								scope.row.totalDepositAmount ||
									scope.row.totalDepositAmount === 0
							"
						>
							{{ handleCurrency(scope.row.currency) }}
							{{
								handleNumber(
									scope.row.currency,
									scope.row.totalDepositAmount
								)
							}}
						</span>
						<span v-else>0</span>
						<br />
						<span
							v-if="
								scope.row.totalDepositNum ||
									scope.row.totalDepositNum === 0
							"
						>
							{{ scope.row.totalDepositNum }}
						</span>
						<span v-else>0</span>
					</template>
				</el-table-column>
				<el-table-column
					key="totalWithdrawAmount"
					align="center"
					min-width="150"
					:label="$t('agent.total_withdrawal_times')"
				>
					<template slot="header">
						{{ $t('agent.total_withdrawal_amount') }}
						<br />
						{{ $t('agent.total_withdrawal_times') }}
					</template>
					<template slot-scope="scope">
						<span
							v-if="
								scope.row.totalWithdrawAmount ||
									scope.row.totalWithdrawAmount === 0
							"
						>
							{{ handleCurrency(scope.row.currency) }}
							{{
								handleNumber(
									scope.row.currency,
									scope.row.totalWithdrawAmount
								)
							}}
						</span>
						<span v-else>0</span>
						<br />
						<span
							v-if="
								scope.row.totalWithdrawNum ||
									scope.row.totalWithdrawNum === 0
							"
						>
							{{ scope.row.totalWithdrawNum }}
						</span>
						<span v-else>0</span>
					</template>
				</el-table-column>
				<el-table-column
					key="createDt"
					align="center"
					min-width="155"
					:label="$t('agent.date')"
					prop="proxyLevelproxyLevelName"
				>
					<template slot="header">
						{{ $t('common.register_time') }}
						<br />
						{{ $t('agent.last_login_time') }}
					</template>
					<template slot-scope="scope">
						{{ scope.row.createDt || '-' }}
						<br />
						{{ scope.row.lastLoginTime || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="operating"
					align="center"
					:label="$t('common.actions')"
					width="140px"
					fixed="right"
				>
					<template slot-scope="scope">
						<el-button
							type="primary"
							icon="el-icon-view"
							size="medium"
							@click="handleGoAgentInfo(scope.row)"
						>
							查看详情
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				:current-page.sync="page"
				background
				class="fenye"
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="size"
				:page-sizes="pageSizes"
				:total="totalRecord"
				@current-change="handleCurrentChangeDialog"
				@size-change="handleSizeChangeDialog"
			></el-pagination>
		</el-dialog>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'

export default {
	name: routerNames.agentLabelConfig,
	components: {
		MainContent
	},
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			queryData: {
				merchantId: undefined,
				createdBy: undefined,
				updatedBy: undefined,
				templateName: undefined,
				templateType: '',
				createdAt: [],
				updatedAt: []
			},
			tableData: [],
			dialogFormVisible: false,
			dialogForm: {
				merchantId: '',
				templateType: '',
				templateName: '',
				description: ''
			},
			rebateRateList: [],
			proxyList: [],
			maxRateData: {},
			dialogLookRebateVisible: false,
			dialogProxyListVisible: false,
			title: '',
			title1: '',
			isSet: false,
			page: 1,
			size: 100,
			totalRecord: 0
		}
	},
	computed: {
		rules() {
			const merchantId = [
				{
					required: true,
					message: this.$t('agent.rule_select_tip_merchant'),
					trigger: 'change'
				}
			]
			return {
				merchantId
			}
		}
	},
	mounted() {
		if (!this.$store.getters.isZk) {
			this.queryData.merchantId = this.$store.getters.merchantInfo.id
			this.loadData()
		}
	},
	methods: {
		// 改变列表条数
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.loadData()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.loadData()
		},
		search() {
			this.pageNum = 1
			this.loadData()
		},
		loadData() {
			this.loading = true
			const create = this.queryData.createdAt || []
			const updated = this.queryData.updatedAt || []

			const [startTime, endTime] = create
			const [startTime1, endTime1] = updated
			let params = {
				...this.queryData,
				createdAtStart: startTime
					? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				createdAtEnd: endTime
					? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				updatedAtStart: startTime1
					? dayjs(startTime1).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				updatedAtEnd: endTime1
					? dayjs(endTime1).format('YYYY-MM-DD HH:mm:ss')
					: undefined
			}
			params = {
				...this.getParams(params)
			}
			delete params.createdAt
			delete params.updatedAt
			// this.$api.rebateRateTemplateMappingQuery(params)
			// this.$api.rebateRateTemplateDetail(params)
			// this.$api.getRebateRateTemplateDetail(params)
			// this.$api.rebateRateTemplateQuery(params)
			this.$api
				.rebateRateTemplateList(params)
				.then((res) => {
					this.loading = false
					const { code, msg } = res
					if (res && code === 200) {
						this.tableData = (res.data && res.data.record) || []
						this.total = (res.data && res.data.totalRecord) || 0
					} else {
						this.$message({
							message: res && msg,
							type: 'error'
						})
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		// 查询输入比例 限制最大输入
		async queryLimit() {
			const res = await this.$api.rebateRateQueryLimit({
				platformFlag: 0
			})
			if (res.code === 200 && res.data) {
				this.maxRateData = res.data
			}
		},
		// 查看比例弹窗
		lookRebateRate(val) {
			this.title1 = '查看比例'
			this.isSet = false
			this.$api
				.rebateRateTemplateDetailQuery({ templateId: val.id })
				.then((res) => {
					if (res.code === 200) {
						this.rebateRateList = res.data || []
					}
				})
			this.dialogLookRebateVisible = true
		},
		// 设置比例弹窗
		setRebateRate(val) {
			this.title1 = '设置比例'
			this.isSet = true
			this.templateId = val.id
			this.$api
				.rebateRateTemplateDetailQuery({ templateId: val.id })
				.then((res) => {
					if (res.code === 200) {
						this.rebateRateList = res.data || []
						if (this.rebateRateList.length === 0) {
							this.addRate()
						}
					}
				})
			this.queryLimit()
			this.dialogLookRebateVisible = true
		},
		// 设置比例 新增一行
		addRate() {
			if (this.rebateRateList.length === 20) {
				this.$message.error('比例等级上限20级')
				return
			}
			this.rebateRateList.push({
				actualPersonRebate: undefined,
				chessRebate: undefined,
				esportsRebate: undefined,
				level: this.rebateRateList.length + 1,
				lotteryTicketRebate: undefined,
				sportsRebate: undefined,
				texasInsuranceRebate: undefined,
				texasRebate: undefined
			})
		},
		// 设置比例 删除一行
		delRate(row) {
			this.rebateRateList = this.rebateRateList.filter(
				(e) => e.level !== row.level
			)
			this.rebateRateList.forEach((e, i) => (e.level = i + 1))
		},
		// 输入比例校验
		getVaLiDate(row, fieldName, index) {
			return (rule, value, callback) => {
				this.$nextTick(() => {
					if (!value && value !== 0) {
						callback(new Error('请输入比例'))
					} else if (value > this.maxRateData[fieldName]) {
						callback(
							new Error(
								`比例范围0-${this.maxRateData[fieldName]}`
							)
						)
					} else if (
						index !== 0 &&
						this.rebateRateList.length > 1 &&
						value > this.rebateRateList[index - 1][fieldName]
					) {
						// 下级不能大于上级
						callback(
							new Error(
								`不能大于${
									this.rebateRateList[index - 1][fieldName]
								}`
							)
						)
					} else {
						callback()
					}
					// this.getValidated()
				})
			}
		},
		// 保存设置比例
		saveRebateRate() {
			const data = {}
			data.templateId = this.templateId
			data.list = this.rebateRateList
			this.$refs.tableForm.validate((valid) => {
				if (valid) {
					this.$api
						.rebateRateTemplateDetailAdd(data)
						.then((res) => {
							const { code } = res
							if (res && code === 200) {
								this.$message.success(this.$t('设置比例成功'))
								this.dialogLookRebateVisible = false
							}
						})
						.catch(() => {})
				}
			})
		},
		// 查看关联总代接口
		getProxyList() {
			const data = {}
			data.pageNum = this.page
			data.pageSize = this.size
			data.templateId = this.templateId
			this.$api
				.rebateRateTemplateMappingTopProxyList(data)
				.then((res) => {
					if (res.code === 200) {
						this.proxyList = res.data.record || []
						this.totalRecord = res.data.totalRecord || 0
						this.dialogProxyListVisible = true
					}
				})
		},
		// 查看关联总代
		lookProxyList(val) {
			this.page = 1
			this.size = 100
			this.templateId = val.id
			this.getProxyList()
		},
		reset() {
			this.queryData = {
				merchantId: undefined,
				createdBy: undefined,
				updatedBy: undefined,
				templateName: undefined,
				templateType: '',
				createdAt: [],
				updatedAt: []
			}
			this.pageNum = 1
			this.search()
		},
		addLabel() {
			this.title = '新增模板'
			this.dialogForm = { templateType: '1' }
			this.dialogFormVisible = true
		},
		edit(val) {
			this.title = '编辑模板'
			this.dialogForm = { ...val, templateType: String(val.templateType) }
			this.dialogFormVisible = true
		},
		deleteLabel(val) {
			const { id } = val
			this.$confirm(
				`<strong>是否确认删除模板?</strong>
        </br><span style='font-size:12px;color:#c1c1c1'>${this.$t(
			'common.del_tips'
		)}</span>`,
				this.$t('common.success_tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning'
				}
			)
				.then(() => {
					this.$api.rebateRateTemplateDelete({ id }).then((res) => {
						const { code } = res
						if (res && code === 200) {
							this.$message.success(
								this.$t('agent.delete_success')
							)
							this.loadData()
						}
					})
				})
				.catch(() => {})
		},
		subAddOrEdit() {
			const data = {}
			data.merchantId = this.dialogForm.merchantId
			data.templateType = Number(this.dialogForm.templateType)
			data.templateName = this.dialogForm.templateName
			data.description = this.dialogForm.description

			this.$refs.formSub.validate((valid) => {
				if (valid) {
					if (this.title === '新增模板') {
						this.$api
							.rebateRateTemplateAdd(data)
							.then((res) => {
								const { code } = res
								if (res && code === 200) {
									this.$message.success(
										this.$t('common.add_success')
									)
									this.pageNum = 1
									this.loadData()
								}
								this.dialogFormVisible = false
							})
							.catch(() => {})
					} else {
						data.id = this.dialogForm.id
						this.$api
							.rebateRateTemplateUpdate(data)
							.then((res) => {
								const { code } = res
								if (res && code === 200) {
									this.$message.success(
										this.$t('common.modify_success')
									)
									this.loadData()
								}
								this.dialogFormVisible = false
							})
							.catch(() => {})
					}
				}
			})
		},
		clear() {
			this.$refs.formSub.resetFields()
		},
		handleCurrentChangeDialog(val) {
			this.page = val
			this.getProxyList()
		},
		handleSizeChangeDialog(val) {
			this.page = 1
			this.size = val
			this.getProxyList()
		},
		handleGoAgentInfo(row) {
			this.dialogProxyListVisible = false
			this.$router.push(
				`/agent/agentManage/agentDetails?userName=${
					row.userName
				}&merchantId=${row.merchantId}&proxyActiveName=pointInfo`
			)
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
::v-deep .tagheight .el-tag {
	height: 24px;
	line-height: 24px;
	min-width: 60px;
}
::v-deep .rempadding .el-dialog__body {
	padding: 0;
	padding-bottom: 30px;
	.contentBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.contentBox,
	form {
		padding: 0 20px;
	}
}
::v-deep .el-input-number__decrease,
::v-deep .el-input-number__increase {
	display: none;
}
::v-deep .el-input-number--medium .el-input__inner {
	padding: 0 15px;
	text-align: left;
}

.decoration {
	text-decoration: underline;
	cursor: pointer;
}
.fenye {
	text-align: center;
}
::v-deep .set-rebate-table {
	.el-form-item {
		margin-bottom: 0;
	}
	.is-error {
		height: 58px;
	}
}
</style>
